<template>
  <view class="viewports">
    <car-info :info="main">
      <ve-cell label="保养单号" v-if="main.maintenanceNo">{{ main.maintenanceNo || '-' }}</ve-cell>
    </car-info>
    <ve-card title="保养信息" type="none" :fold="true" style="margin-top: 0" v-if="main" v-model:initFold="initFold1">
      <ve-cell label="保养单关联门店">{{ main.siteName || '-' }}</ve-cell>
      <ve-cell label="修理厂">{{ main.maintenanceShop || '-' }}</ve-cell>
      <ve-cell label="本次保养里程">{{ main.entranceKilometre || '-' }} 公里</ve-cell>
      <ve-cell label="下次保养里程">{{ main.estimatedKilometre || '-' }} 公里</ve-cell>
      <ve-cell label="本次保养日期">{{ main.entranceDate || '-' }}</ve-cell>
      <ve-cell label="下次保养日期">{{ main.estimatedTime || '-' }}</ve-cell>
      <ve-cell label="关联订单号">
        <view>
          {{ main.orderNo || '-' }}
          <view class="line-ellipsis" v-if="main.giveStaffName" style="width: 400rpx">交车人：{{ main.giveStaffName }}</view>
        </view>
      </ve-cell>
      <ve-cell label="承租人信息">
        <div>
          <template v-if="main.memberName && main.memberPhone"> {{ main.memberName }} | {{ main.memberPhone }} </template>
          <template v-else>-</template>
        </div>
      </ve-cell>
      <ve-cell label="负责人">{{ main.undertaker || '-' }}</ve-cell>
      <ve-cell label="备注">{{ main.remark || '-' }}</ve-cell>
      <ve-cell label="照片" layout="vertical">
        <ve-upload disabled v-model="main.fileIdList"></ve-upload>
      </ve-cell>
    </ve-card>
    <ve-card title="保养费用" type="none" :fold="true">
      <ve-cell-price label="保养费" :value="main.maintenanceAmount" />
      <ve-cell label="费用备注">{{ main.feeRemark || '-' }}</ve-cell>
    </ve-card>
    <!-- 已付款展示结算信息 -->
    <ve-card title="结算信息" type="none" fold="true" v-if="assetFeeInfo?.feeStatus == 1">
      <ve-cell-val label="结算时间" :value="assetFeeInfo.confirmTime" />
      <ve-cell-val label="结算方式" :value="assetFeeInfo.payTypeName" />
      <ve-cell-val label="结算账号" :value="assetFeeInfo.payAccountName" />
      <ve-cell-val label="供应商名称" :value="assetFeeInfo.customerName" />
      <ve-cell-val label="供应商收款账号" :value="assetFeeInfo.customerAccount" />
      <ve-cell-val label="结算备注" :value="assetFeeInfo.settlementRemark" />
      <ve-cell label="结算凭证" layout="vertical">
        <ve-upload v-model="assetFeeInfo.fileIdList" disabled></ve-upload>
      </ve-cell>
    </ve-card>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getDetailApi } from '@/api/asset/car-maintenance'
  import CarInfo from '@/pages/common/components/car-info.vue'

  const initFold1 = ref(true)
  const mainId = ref() //保养单id
  const main = ref<any>({}) //保养详情
  const assetFeeInfo = ref(null)

  const getDetail = async (mainId) => {
    const res = await getDetailApi({ id: mainId })
    main.value = res.result
    assetFeeInfo.value = main.value.assetFeeInfo
  }
  onLoad((options) => {
    mainId.value = options.id
    if (mainId.value) {
      getDetail(mainId.value)
    }
  })
</script>

<style lang="scss" scoped>
  page {
    background: #f7f8fa;
  }
  .viewports {
    padding: 24rpx;
    background: #f7f8fa;
    height: 100vh;
  }

  .car-info-content {
    height: 168rpx;
    background-image: url('../../../../static/images/carinfo-bc.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: center;
    padding-left: 32rpx;
    color: #ffffff;
    font-family: PingFang SC-Regular, PingFang SC;

    view:nth-of-type(1) {
      font-size: 40rpx;
      font-weight: 600;
      margin-bottom: 4rpx;
    }
    view:nth-of-type(2) {
      margin-top: 4rpx;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  :deep(.ve-cell-title) {
    width: 240rpx;
    max-width: 240rpx;
  }
</style>
